<template>
  <el-dialog v-if="dialog" :close-on-click-modal="false" :visible.sync="dialog" class="menu-mange noScoll" title="常用功能" width="50%" :before-close="handleClose">
    <div style="border: 1px solid #DCDFE6;">
      <div class="table">
        <vxe-table
          ref="treeTable"
          :key="key"
          :data="list"
          :auto-resize="true"
          :check-strictly="true"
          resizable
          row-id="id"
          :checkbox-config="{checkRowKeys: defaultSelecteRows, highlight: false}"
          tree-config
          border
          highlight-hover-row
          highlight-current-row
          height="410"
        >
          <vxe-table-column type="checkbox" field="checked" width="40" />
          <vxe-table-column tree-node field="name" width="250" title="名称" />
          <vxe-table-column field="remark" min-width="300" title="描述" />
        </vxe-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取消</el-button>
      <el-button type="primary" @click="bindMenu()">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getPageList, queryUserPermissionFavorityByUserId, updateUserPermissionFavority } from '@/api/authority'
export default {
  data() {
    return {
      active: 0,
      key: 0,
      module: 'tenant',
      list: [],
      dialog: false,
      defaultSelecteRows: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClose() {
      this.dialog = false
    },
    getList() {
      getPageList().then(res => {
        this.key++
        this.list = res
      })
    },
    getFavority() {
      queryUserPermissionFavorityByUserId().then(response => {
        this.getList()
        this.defaultSelecteRows = response
      })
    },
    bindMenu() {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      const selectRecords = this.$refs.treeTable.getCheckboxRecords().map(item => item.id)
      if (selectRecords.length > 14) {
        alert('最多可以选择14个常用功能')
        return false
      }
      updateUserPermissionFavority({
        userId: 0,
        permissionIds: selectRecords
      }).then(res => {
        this.$emit('refresh')
        this.dialog = false
        this.$message.success('修改成功')
      })
    }
  }
}
</script>

<style lang="scss">
.menu-mange {
  .tabs {
    display: flex;
    padding: 0;
    margin: 0 0 16px 0;
    background-color: #eee;
    li {
      list-style: none;
      padding: 5px 20px;
      color: #909399;
      cursor: pointer;
    }
    .active {
      background-color: #fff;
      color: #409eff;
    }
  }
  .table {
    padding: 0 0px 0px 0px;
  }
}
</style>
